const request = require("miniapp-request");
var ctx;
global.Page({
    data: {
        shareMessage: '邀请您参加肿瘤防治健康跑',
        reShow: '',
        regionList: [],
        finishedCgtCount: 0,
        mapBgImageWidth: 750,
        mapBgImageHeight: 1061,
        windowInfo: {},
        windowWidth: 721,
        balloonXRatio: 1,
        showQaResult: false,
        runingYyPosition: {
            x: 0,
            y: 0,
        },
        result: {
            // allCount: 56,
            // msg: "癌防知识知晓“六边形战士”",
            // myScore: "85分",
            // nick_name: "林多多",
            // rightCount: 23
        },
        showFirstLoading: true,
        isFirstLoad: true
    },
    onShareAppMessage: function (res) {
        return {
            title: this.data.shareMessage || this.data.title,
            path: '/pages/index/index'
        }
    },
    onLoad: function (options) {
        const windowInfo = wx.getWindowInfo();
        this.setData({
            reShow: options.reShow ? options.reShow : 'no',
            windowInfo: windowInfo,
            windowWidth: windowInfo.windowWidth,
            balloonXRatio: windowInfo.windowWidth / this.data.mapBgImageWidth,
            // balloonXRatio: this.data.mapBgImageWidth / windowInfo.windowWidth,
        });

        // 取得我的测评结果
        this.getQaResult();
    },
    regionRuning() {
        let {
            finishedCgtCount,
            runingYyPosition,
            regionList,
        } = this.data;

		// console.log(runingYyPosition);
		// -----------------
            finishedCgtCount++;
            if (finishedCgtCount < regionList.length) {
                this.setData({
                    finishedCgtCount,
                    // runingYyPosition
                });
            } else {
                // 已跑完
                // console.log("已跑完");
                this.setData({
                    showQaResult: true
                });
                this.showQaResult();
                return;
            }
		// -----------------
        var that = this;
        setTimeout(function () {
            that.regionRuning();
        }, 200);

    },
    onShow: function () {
        if (this.data.reShow != 'yes') {
            request({
                url: '/index/Qa/regionListForMap.html',
                data: {
                    nick_name: this.data.nick_name
                },
                method: 'POST'
            }).then(res => {
                wx.hideLoading();
                const {
                    code,
                    msg,
                    data
                } = res.data
                if (code >= 0) {
                    this.setData({
                        regionList: data.regionList,
                        finishedCgtCount: 1,
                    });
                    this.regionRuning();
                } else {
                    wx.showModal({
                        title: '提示',
                        content: msg,
                        showCancel: false,
                    });
                }

                this.setData({
                    loading: false
                });
            })
        }
    },
    // 显示结果
    showQaResult: function () {
        let {
            result,
            windowInfo
        } = this.data;
        // console.log(windowInfo);
        wx.createSelectorQuery()
            .select('#myCanvas') // 在 WXML 中填入的 id
            .fields({
                node: true,
                size: true
            })
            .exec((res) => {
                // Canvas 对象
                const canvas = res[0].node;
                // 渲染上下文
                const ctx = canvas.getContext('2d');

                canvas.width = windowInfo.windowWidth * windowInfo.pixelRatio;
                canvas.height = windowInfo.windowHeight * windowInfo.pixelRatio;

                // 背景图片
                const backgroundImage = canvas.createImage();
                backgroundImage.onload = (e) => {
                    // 绘制背景图
                    ctx.drawImage(backgroundImage, 0, 0, 750, 1182, 0, 0, canvas.width, canvas.height);

                    const widthScale = canvas.width / 750;
                    const heightScale = canvas.height / 1182;
                    //昵称
                    ctx.fillStyle = '#333333';
                    ctx.font = (35 * widthScale) + "px YOUSHEhaoshenti"; //SimHei
                    ctx.textAlign = 'center';
                    ctx.fillText(result.nick_name + " 恭喜您获得以下称号", 750 / 2 * widthScale, 83 * heightScale);
                    ctx.font = (45 * widthScale) + "px YOUSHEhaoshenti"; //SimHei
                    ctx.fillText(result.msg, 750 / 2 * widthScale, 160 * heightScale);

                    // 画圆：大圆
                    ctx.beginPath()
                    ctx.fillStyle = '#e5b8c0';
                    ctx.arc(750 / 2 * widthScale, (356 - 20) * heightScale, 120 * widthScale, 0, 2 * Math.PI);
                    ctx.fill();

                    // 画圆：内圆
                    ctx.beginPath()
                    ctx.fillStyle = '#AA152E';
                    ctx.arc(750 / 2 * widthScale, (356 - 20) * heightScale, 105 * widthScale, 0, 2 * Math.PI);
                    ctx.fill();

                    // 分数
                    ctx.fillStyle = '#ffffff';
                    ctx.font = "bold " + (80 * widthScale) + "px Source Han Sans SC";
                    ctx.fillText(result.myScore, 750 / 2 * widthScale, 356 * heightScale);

                    // 二维码图片
                    const qrcodeImage = canvas.createImage();
                    qrcodeImage.onload = (e) => {
                        // 绘制二维码 668x319 606x264
                        ctx.drawImage(qrcodeImage,
                            0, 0, 668, 319,
                            (750 - 668) / 2 * widthScale, 600 * widthScale, 668 * widthScale, 319 * widthScale);
                    }
                    qrcodeImage.src = '../../image/result/qrcode.jpg';

                }
                backgroundImage.src = '../../image/result/background.jpg';
            })

    },
    saveScreenshot: function () {
        wx.createSelectorQuery()
            .select('#myCanvas') // 在 WXML 中填入的 id
            .fields({
                node: true,
                size: true
            })
            .exec((res) => {
                // Canvas 对象
                const canvas = res[0].node;
                wx.canvasToTempFilePath({
                    canvas: canvas, // 画布Canvas对象
                    quality: 1, // 图片质量(0, 1)
                    success(res) {
                        // console.log("store success: ", res);
                        wx.showShareImageMenu({
                            path: res.tempFilePath
                        })
                    },
                    fail(res) {
                        console.log("store fail: ", res);
                    },
                }, this)

            })
    },
    getQaResult: function () {
        request({
            url: '/index/Qa/myQaResult.html',
            data: {},
            method: 'POST'
        }).then(res => {
            wx.hideLoading();
            const {
                code,
                msg,
                data
            } = res.data

            this.setData({
                isFirstLoad: false,
                showFirstLoading: false
            })
            if (code >= 0) {
                this.setData({
                    result: data
                });
                if (this.data.reShow == 'yes') {
                    // 回显就直接显示分数
                    this.setData({
                        showQaResult: true
                    });
                    this.showQaResult();
                }
            } else {
                wx.showModal({
                    title: '提示',
                    content: msg,
                    showCancel: false,
                });
            }

            this.setData({
                loading: false
            });
        })
    }
})